<!DOCTYPE html>
<html>
  <!--
  Copyright (c) 2013 The Chromium Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
  -->
<head>
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="-1">
  <title>{{title}}</title>
  <script type="text/javascript" src="common.js"></script>
  <script type ="text/javascript" src="example.js"></script>
  <style>
    .columns {
      display: -webkit-flex;
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-flex-direction: row;
    }
    .column {
      -webkit-flex: 1;
      border-left: 1px solid #ccc;
      padding: 0 8px;
    }
  </style>
</head>
<body {{attrs}} data-width="0" data-height="0">
  <h1>{{title}}</h1>
  <h2>Status: <code id="statusField">NO-STATUS</code></h2>
  <p>
    This example shows how to use the pp::VarDictionary var type.
  </p>
  <p>
    Click the radio buttons below to choose a function, input some parameters,
then click the button to call that function in the NaCl module.  After every
function call, the NaCl module's dictionary will be displayed on the right.
  </p>
  <div class="columns">
    <div class="column">
      <div>
        <span>
          <input type="radio" id="radioget" name="group" checked="checked">Get
          <input type="radio" id="radioset" name="group">Set
          <input type="radio" id="radiodelete" name="group">Delete
          <input type="radio" id="radiohaskey" name="group">HasKey
          <input type="radio" id="radiogetkeys" name="group">GetKeys
        </span>
      </div>
      <div class="function" id="get">
        <span>
          Key:<input type="text" id="getKey" value="array">
          <button>Get</button>
        </span>
      </div>
      <div class="function" id="set" hidden>
        <span>
          Key:<input type="text" id="setKey" value="baz">
          Value:<input type="text" id="setValue" value="[1, 2, 3]">
          <button>Set</button>
          <p>
            <em>hint: type value as <a href="http://json.org">JSON</a>.
                e.g.:</em>
            <ul>
              <li>4245</li>
              <li>4245.65</li>
              <li>"foobar"</li>
              <li>[1, 2, 3, "foo"]</li>
              <li>{"foo": "bar", "baz": 3}</li>
            </ul>
          </p>
        </span>
      </div>
      <div class="function" id="delete" hidden>
        <span>
          Key:<input type="text" id="deleteKey" value="foo">
          <button>Delete</button>
        </span>
      </div>
      <div class="function" id="haskey" hidden>
        <span>
          Key:<input type="text" id="haskeyKey" value="key1">
          <button>HasKey</button>
        </span>
      </div>
      <div class="function" id="getkeys" hidden>
        <span>
          <button>GetKeys</button>
        </span>
      </div>
      <p><b>Log:</b></p>
      <pre id="log" style="font-weight: bold"></pre>
      <div id="listener"></div>
    </div>
    <div class="column" id="dictColumn">
      <span>Dictionary:</span>
      <pre id="dict"></pre>
    </div>
  </div>
</body>
</html>
